<template>
		<div class="message">
			<!-- 消息中心 -->
			<div class="message_up">
				<div class="message_upcp">
					<div class="message_upcp_cp">
						<img src="../assets/390.png">
					</div>
					<div class="message_button">
						<!-- <div class="message_button_left"></div> -->
						<button> 0分钟 </button>
						<button class="message_button_right">开通会员</button>
					</div>
				</div>
				
				
			</div>
			<div class="message_down">
				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/huiyuanzhongxin.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/vipCen">会员中心</router-link>
				</p>
					</div>
					<div class="message_down_right">
							<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/xiaoxizhongxin.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/vipCen">消息中心</router-link>
				</p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/mianliuliang.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/freFlo">在线听歌免流量</router-link>
				</p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/saoyisao.png">
					</div>
					<div class="message_down_ft">
						<p>扫一扫</p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/pifu.png">
					</div>
					<div class="message_down_ft">
							<p><router-link to="/chaSki">个性换肤</router-link>
				</p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/tinggeshiqu.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/lisRec">听歌识曲</router-link></p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/dingshibofang.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/plaReg">定时播放</router-link></p>
					</div>
					<div class="message_down_right">
						<img src="../assets/icon-next32.png">
					</div>
				</div>



				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/modilingsheng.png">
					</div>
					<div class="message_down_ft">
						<p><router-link to="/rinSet">魔笛铃声</router-link></p>
				    </div>
				 	<div class="message_down_right">
						<img src="../assets/icon-next32.png">
			     	</div>
				</div>

				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/suopinggeci.png">
					</div>
					<div class="message_down_ft">
						<p>锁屏歌词</p>
					</div>
					<div class="message_down_t">
						<img src="../assets/kaiqi.png">
					</div>
				</div>
	                

	            <div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/zhuomiangeci.png">
					</div>
					<div class="message_down_ft">
						<p>桌面歌词</p>
					</div>
					<div class="message_down_t">
						<img src="../assets/kaiqi.png">
					</div>
				</div>


				<div class="message_downMain">
					<div class="message_down_pc">
						<img src="../assets/liuliangtixing.png">
					</div>
					<div class="message_down_ft">
						<p>流量提醒</p>
					</div>
					<div class="message_down_t">
						<img src="../assets/weikaiqi.png">
					</div>
				</div>
			</div>
		    <div class="message_footer">
		        <div class="message_footer_right">
		        	<div><router-link to="/layout/found"><img src="../assets/icon-drop.png"></router-link></div>
		       	    <div><router-link to="/logReg">退出</router-link></div>
		       	</div>
		       	<div class="message_footer_left">
		        	<div><img src="../assets/icon-setup.png"></div>
		        	<div><router-link to="/set">设置</router-link></div>
		        </div>
		    </div>
		    	
		</div>
</template>
<script>
	export default {
		name:'messageCenter',
		data(){
			return{
				show:true
			}
		}
	}
</script>
<style scoped lang="Less">

.message{
	width: 696 / 100rem;
	overflow: hidden;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
}
.message_upcp{
   width: 696 / 100rem;
   height: 217 / 100rem;
   margin-top: 100 / 100rem;
   
}
.message_upcp_cp{
	width: 120 / 100rem;
	height: 120 / 100rem;
	margin: 0 auto;
}
.message_upcp_cp img{
	width: 120 / 100rem;
	height: 120 / 100rem;
	border-radius:120 / 100rem;
}
.message_button{
	width: 385 / 100rem;
	height: 60 / 100rem;
	line-height: 58 / 100rem;
	margin: 0 auto;
	margin-top:30 / 100rem;
}
button{
	width: 150 / 100rem;
	height: 58 / 100rem;
	border-radius: 20 / 100rem;
	border:1px solid #d2a6f7;
	background-color: #ffffff;
	font-size: 24 / 100rem;

}
button:nth-child(1){
	border:1/100rem solid #c995f5;
	color: #d2a6f7
}
.message_button_right{
	margin-left: 76 / 100rem;
}
.message_button_right img{
	width: 20 / 100rem;
	height: 30 / 100rem;
}
/*.................................................*/
.message_down{
	width: 100%;
    margin-top: 55 / 100rem;
    overflow: hidden;

}
.message_downMain{
	width: 100%;
	height: 75 / 100rem;
	border-bottom: 1px solid #cccccc;
}
.message_down_pc,.message_down_ft{
	height: 75 / 100rem;
	float: left;
	line-height: 75 / 100rem;

}
.message_downMain img{
	width:50/ 100rem;
	height: 50 / 100rem;
	margin-top: 8 / 100rem;
}
.message_downMain div p{
	font-size: 24 / 100rem;
}
.message_down_pc{
	margin-left: 36 / 100rem;
}
.message_down_ft{
	margin-left: 20 / 100rem;
}
.message_down_right{
	width: 20 / 100rem;
	height: 36 / 100rem;
	float: right;
	margin-right: 66 / 100rem;
	margin-top: 12 / 100rem;
	
}
.message_down_t{
	width: 20 / 100rem;
	height: 36 / 100rem;
	float: right;
	margin-right: 88 / 100rem;
	margin-top: 12 / 100rem;
}
.message_down_t img{
	width: 57 / 100rem;
	height: 27 / 100rem;
}
.message_down_right img{
	line-height: 75 / 100rem;
	width: 20 / 100rem;
	height: 36 / 100rem;
}
.message_footer{
	width: 696 / 100rem;
	height: 110 / 100rem;

}
.message_footer_left,.message_footer_right{
	 width: 140 / 100rem;
     height: 60 / 100rem;
     line-height: 60 / 100rem;
	 float: right;
	/* background-color: red;*/
	 margin-top: 45 / 100rem;
	 margin-left: 72 / 100rem;
	 float: right;
}
.message_footer img{
   width: 50 / 100rem;
   height: 50 / 100rem;
}
.message_footer_left div,.message_footer_right div{
	float: left;
	margin-left: 14/ 100rem;
	color: #070707;
  
}
.message_footer_right{
	margin-right: 45 / 100rem;
}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    width: 100%;
  }
  50% {
   width: 35%;
  }
  100% {
   width:  0%;
  }
}
	
</style>